<template>
  <div>
    <div ref="refreshContainer">
      <div  class="pull-down-content">
        <div ref="arrowIcon" id="arrowIcon"></div>
        <div ref="pullIcon" class="spinner"></div>
        <span ref="pullText" ></span>
      </div>
      <div id='container'>

        <div class="content" id="content">
          <p>
            paul - 广州千奇百趣公司
          </p>
          <template v-for="(value, key) in loadStep" >
            <div class="son">{{ value }}</div>
          </template>
          <p>拉到200到底拉</p>

        </div>
      </div>
    </div>
  </div>


</template>
<script type="text/babel">
  import nativeScroll from  "@/easyScroll/easyScroll"

  export default{
    data(){
      return{
        loadStep : 50 ,
        scrollInstance : null // scroll 实例
      }
    },
    components:{

    },
    mounted(){


      // 滚动加载
      this.scrollInstance = new nativeScroll({
        el: this.$refs.father,
        loadMore: this.loadMore,
        stateTextEL: this.$refs.pullText ,
        pullIconEl: this.$refs.pullIcon,
        refreshContainer: this.$refs.refreshContainer,
        arrowIcon: this.$refs.arrowIcon
      })
    },
    methods:{
      loadMore() {
        // 模拟异步加载数据
        setTimeout(()=>{
          if( this.loadStep <200 ) {
            this.loadStep += 50
          }
          else{
            this.scrollInstance.disablePullUp()
          }
        }, 500)
      }

    }
  }
</script>
<style lang="less" scoped>

  .content{
    background-color: greenyellow;
  }

  .son{
    text-align: center;
    height: 50px;
  }

  .pull-down-content {
    margin-top: -50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    background-color: #f8f8f8;
  }
  .pull-down-content .spinner {
    display: inline-block;
    margin-right: 8px;
  }
  @-webkit-keyframes spinner-12 {
    0% {
      -webkit-transform: rotate(0deg);
    }

    8.333333333333332% {
      -webkit-transform: rotate(30deg);
    }

    16.666666666666664% {
      -webkit-transform: rotate(60deg);
    }

    25% {
      -webkit-transform: rotate(90deg);
    }

    33.33333333333333% {
      -webkit-transform: rotate(120deg);
    }

    41.66666666666667% {
      -webkit-transform: rotate(150deg);
    }

    50% {
      -webkit-transform: rotate(180deg);
    }

    58.333333333333336% {
      -webkit-transform: rotate(210deg);
    }

    66.66666666666666% {
      -webkit-transform: rotate(240deg);
    }

    75% {
      -webkit-transform: rotate(270deg);
    }

    83.33333333333334% {
      -webkit-transform: rotate(300deg);
    }

    91.66666666666666% {
      -webkit-transform: rotate(330deg);
    }
  }

  .pull-down-content .spinner:before {
    display: inline-block;
    width: 20px;
    height: 20px;

    content: " ";
    -webkit-animation: spinner-12 1.6s step-start infinite;
    vertical-align: middle;

    background-image: url("");
    background-size: 20px 20px;
  }
  .pull-down-content .none {
    display: none;
  }
  .pull-down-content #arrowIcon {
    width: 10px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background-image: url("");
    background-size: 100% 100%;
    margin-right: 8px;
    margin-bottom: 6px;
  }
  .pull-down-content .up {
    -webkit-transform: rotate(180deg);
    -webkit-transition: -webkit-transform .5s;
  }
  .pull-down-content .down {
    -webkit-transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s;
  }
</style>

